<template>
    <div class="service-detail-container">
        <el-card class="detail-card">
            <h1>服务详情</h1>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 居民姓名 -->
                    <el-form-item label="居民姓名" class="form-item">
                        <span v-for="user in users" :key="user.id">
                            <span v-if="user.id === serviceRecord.userId">
                                {{ user.name }}
                            </span>
                        </span>
                    </el-form-item>
                    <!-- 身份证号 -->
                    <el-form-item label="身份证号" class="form-item">
                        <span v-for="user in users" :key="user.id">
                            <span v-if="user.id === serviceRecord.userId">
                                {{ user.idcard }}
                            </span>
                        </span>
                    </el-form-item>
                    <!-- 性别 -->
                    <el-form-item label="性别" align="center" prop="sex" class="form-item">
                        <span v-for="user in users" :key="user.id">
                            <span v-if="user.id === serviceRecord.userId">
                                <dict-tag :options="sys_user_sex" :value="user.sex" />
                            </span>
                        </span>
                    </el-form-item>
                    <!-- 出生日期 -->
                    <el-form-item label="出生日期" class="form-item">
                        <span v-for="user in users" :key="user.id">
                            <span v-if="user.id === serviceRecord.userId">
                                {{ user.birthday }}
                            </span>
                        </span>
                    </el-form-item>
                    <!-- 联系电话 -->
                    <el-form-item label="联系电话" class="form-item">
                        <span v-for="user in users" :key="user.id">
                            <span v-if="user.id === serviceRecord.userId">
                                {{ user.tel }}
                            </span>
                        </span>
                    </el-form-item>
                    <!-- 现居地 -->
                    <el-form-item label="现居地" class="form-item">
                        <span v-for="user in users" :key="user.id">
                            <span v-if="user.id === serviceRecord.userId">
                                {{ user.address }}
                            </span>
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!-- 服务编号 -->
                    <el-form-item label="服务编号" class="form-item">
                        <span>{{ serviceRecord.id }}</span>
                    </el-form-item>
                    <!-- 服务状态 -->
                    <el-form-item label="服务状态" class="form-item">
                        <dict-tag :options="audit_tatus_five" :value="serviceRecord.status" />
                    </el-form-item>
                    <!-- 服务机构 -->
                    <el-form-item label="服务机构" class="form-item">
                        <span v-for="institution in institutions" :key="institution.id">
                            <span v-if="institution.id === serviceRecord.organizationId">
                                {{ institution.institutionname }}
                            </span>
                        </span>
                    </el-form-item>
                    <!-- 服务团队 -->
                    <el-form-item label="服务团队" class="form-item">
                        <span v-for="team in teams" :key="team.id">
                            <span v-if="team.id === serviceRecord.teamId">
                                {{ team.name }}
                            </span>
                        </span>
                    </el-form-item>
                    <!-- 服务包 -->
                    <el-form-item label="服务包" prop="packageId" class="form-item">
                        <dict-tag :options="package_type" :value="serviceRecord.packageId" />
                    </el-form-item>
                    <!-- 服务项目 -->
                    <el-form-item label="服务项目" class="form-item">
                        <span v-for="item in service_items" :key="item.itemId">
                            <span v-if="item.itemId === serviceRecord.itemId">
                                {{ item.itemName }}
                            </span>
                        </span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 服务医生 -->
                    <el-form-item label="服务医生" class="form-item">
                        <span v-for="doctor in doctors" :key="doctor.id">
                            <span v-if="doctor.id === serviceRecord.doctorId">
                                {{ doctor.name }}
                            </span>
                        </span>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <!-- 审核人 -->
                            <el-form-item label="审核人" class="form-item">
                                <span>{{ state.user.userName }}</span>
                            </el-form-item>
                            <!-- 完成时间 -->
                            <el-form-item label="完成时间" class="form-item">
                                <span>{{ serviceRecord.finishTime }}</span>
                            </el-form-item>
                            <!-- 服务备注 -->
                            <el-form-item label="服务备注" class="form-item">
                                <span>{{ serviceRecord.remark }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>

                <el-col :span="12">
                    <!-- 服务地点 -->
                    <el-form-item label="服务地点" class="form-item">
                        <dict-tag :options="service_locations" :value="serviceRecord.location" />
                    </el-form-item>
                    <!-- 预约时间 -->
                    <el-form-item label="预约时间" class="form-item">
                        <span>{{ serviceRecord.appointmentTime }}</span>
                    </el-form-item>
                    <!-- 提交时间 -->
                    <el-form-item label="提交时间" class="form-item">
                        <span>{{ serviceRecord.submissionTime }}</span>
                    </el-form-item>
                    <!-- 审核时间 -->
                    <el-form-item label="审核时间" class="form-item">
                        <span>{{ serviceRecord.auditTime }}</span>
                    </el-form-item>
                    <!-- 取消时间 -->
                    <el-form-item label="取消时间" class="form-item">
                        <span>{{ serviceRecord.cancellationTime }}</span>
                    </el-form-item>
                    <!-- 取消原因 -->
                    <el-form-item label="取消原因" class="form-item">
                        <span>{{ serviceRecord.cancellationReason }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-button @click="goBack" class="back-button">返回</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getService_record } from "@/api/service_record/service_record";
import { listService_record } from "@/api/service_record/service_record";
import { listDoctor } from "@/api/system/doctor";
import { listResident } from "@/api/resident/resident";
import { listInstitution } from "@/api/system/institution";
import { listItem } from "@/api/item/item";
import { listTeam } from "@/api/system/team";
import { getUserProfile } from "@/api/system/user";

// 获取当前实例
const { proxy } = getCurrentInstance();
// 获取字典数据
const { sys_user_sex } = proxy.useDict('sys_user_sex');
const { years, audit_tatus_five, package_type, service_locations } = proxy.useDict('years', 'audit_tatus_five', 'package_type', 'service_locations');

// 服务记录列表
const service_recordList = ref([]);
// 控制弹窗是否打开
const open = ref(false);
// 加载状态
const loading = ref(true);
// 控制搜索是否显示
const showSearch = ref(true);
// 选中的记录 ID 数组
const ids = ref([]);
// 单选状态
const single = ref(true);
// 多选状态
const multiple = ref(true);
// 记录总数
const total = ref(0);
// 标题
const title = ref("");

// 用户信息
const state = reactive({
    user: {},
    roleGroup: {},
    postGroup: {}
});

// 获取用户信息的方法
const getUser = () => {
    getUserProfile().then(response => {
        state.user = response.data;
        console.log(state.user);
        state.roleGroup = response.roleGroup;
        state.postGroup = response.postGroup;
    });
};

// 调用获取用户信息的方法
getUser();

// 服务项目数据
const service_items = ref([]);
// 获取服务项目数据的方法
const getService_items = () => {
    listItem().then(response => {
        service_items.value = response.rows;
        console.log(service_items.value);
    });
};
// 调用获取服务项目数据的方法
getService_items();

// 机构数据
const institutions = ref([]);
// 获取机构数据的方法
const getInstitutions = () => {
    listInstitution().then(response => {
        institutions.value = response.rows;
    });
};
// 调用获取机构数据的方法
getInstitutions();

// 团队数据
const teams = ref([]);
// 获取团队数据的方法
const getTeams = () => {
    listTeam().then(response => {
        teams.value = response.rows;
        console.log(teams.value);
    });
};
// 调用获取团队数据的方法
getTeams();

// 用户数据
const users = ref([]);
// 获取用户数据的方法
const getUsers = () => {
    listResident().then(response => {
        users.value = response.rows;
        console.log(users.value);
    });
};
// 调用获取用户数据的方法
getUsers();

// 医生数据
const doctors = ref([]);
// 获取医生数据的方法
const getDoctors = () => {
    listDoctor().then(response => {
        doctors.value = response.rows;
    });
};
// 调用获取医生数据的方法
getDoctors();

// 路由实例
const router = useRouter();
// 详情页跳转方法
const handleDetail = (row) => {
    const ids = row.id;
    router.push({ path: 'servicexiangqing', query: { id: ids } });
};

// 表单数据和查询参数
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        teamId: null,
        institutionId: null,
        packageId: null,
        status: null,
        location: null,
        appointmentTime: null,
    },
    rules: {}
});

// 解构出表单数据和查询参数
const { queryParams, form, rules } = toRefs(data);

// 查询服务记录列表的方法
const getList = () => {
    loading.value = true;
    listService_record(queryParams.value).then(response => {
        // 过滤服务状态大于 2 的记录
        service_recordList.value = response.rows.filter(item => item.status < 3);
        console.log(response.rows.filter);
        // 更新 total 为过滤后的记录数
        total.value = service_recordList.value.length;
        loading.value = false;
    });
};


// 表单重置方法
const reset = () => {
    form.value = {
        id: null,
        userId: null,
        organizationId: null,
        teamId: null,
        institutionId: null,
        doctorId: null,
        packageId: null,
        itemId: null,
        status: null,
        location: null,
        appointmentTime: null,
        submissionTime: null,
        auditTime: null,
        auditorId: state.user.userName,
        cancellationTime: null,
        cancellationReason: null,
        finishTime: null,
        remark: null
    };
    proxy.resetForm("service_recordRef");
};

// 调用获取服务记录列表的方法
getList();

// 当前路由信息
const route = useRoute();
// 服务记录详情数据
const serviceRecord = ref({});

// 返回到服务记录界面的方法
const goBack = () => {
    router.back();
};


// 获取服务记录详情的方法
const fetchServiceRecord = async () => {
    const id = route.query.id;
    try {
        const response = await getService_record(id); // 调用 API 获取服务记录详情
        serviceRecord.value = response.data; // 将获取到的数据赋值给 serviceRecord
    } catch (error) {
        console.error('获取服务记录详情失败', error);
    }
};

// 组件挂载完成时调用获取服务记录详情的方法
onMounted(() => {
    fetchServiceRecord();
});
</script>

<style scoped lang="scss">
.service-detail-container {
    padding: 30px;
    background-color: #f4f4f4;
}

.detail-card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: white;
    padding: 20px;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.form-item {
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 10px;
    background-color: #f9f9f9;
}

.el-form-item__label {
    font-weight: 500;
    color: #666;
}

.back-button {
    background-color: #42b983;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: #36a672;
    }
}
</style>